<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Flat UI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet">

    <!-- Loading Flat UI -->
    <link href="{{STATIC_URL}}css/flat-ui.css" rel="stylesheet">
    <link rel="shortcut icon" href="{{STATIC_URL}}images/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">

      <div class="row">
        <div class="span6">
          <div class="row demo-navigation">
            <div class="span7">
              <div class="btn-toolbar">
                <img class="logo" src="{{STATIC_URL}}images/logo.png">
                <div class="btn-group">
                  {%if delete%}
                  <a class="btn btn-danger" href="home"><i class="fui-cmd-16"></i></a>
                  <a class="btn btn-danger" href="add"><i class="fui-plus-16"></i></a>
                  <a class="btn btn-danger" href="update"><i class="fui-new-16"></i></a>
                  <a class="btn btn-danger active" href="#"><i class="fui-cross-16"></i></a>
                  <a class="btn btn-danger" href="settings"><i class="fui-settings-16"></i></a>
                  <div style="display: inline-table; margin:0" class="navbar btn btn-danger navbar-inverse">
                  {%else%}
                  <a class="btn btn-warning" href="home"><i class="fui-cmd-16"></i></a>
                  <a class="btn btn-warning" href="add"><i class="fui-plus-16"></i></a>
                  <a class="btn btn-warning active" href="#"><i class="fui-new-16"></i></a>
                  <a class="btn btn-warning" href="delete"><i class="fui-cross-16"></i></a>
                  <a class="btn btn-warning" href="settings"><i class="fui-settings-16"></i></a>
                  <div style="display: inline-table; margin:0" class="navbar btn btn-warning navbar-inverse">
                  {%endif%}

                    <ul class="nav" style="margin:0 !important">
                      <li>
                        <i class="fui-man-16"></i> <span>{% if user.first_name %} {{user.first_name}} {%else%}{{user.username}}{%endif%}</span>
                        <ul>
                          <li><a href="/account">Account</a></li>
                          <li><a href="/logout">Logout</a></li>
                          <li><a href="/about">About SQFlight</a></li>
                        </ul>
                      </li>
                    </ul>
                  </div><!--/.nav-collapse -->

                </div>
              </div> <!-- /toolbar -->
            </div>
          </div> <!-- /demo-navigation -->
        </div>
      </div>

      <div id="" class="row demo-tiles">
        <div class="span12">
          <h3>
            {%if delete%}
            <img  class="icon-little" src="{{STATIC_URL}}images/illustrations/delete.png">
            <span>Delete Tables</span>
            {%else%}
            <img  class="icon-little" src="{{STATIC_URL}}images/illustrations/update.png">
            <span>Update Tables</span>
            {%endif%}
          </h3>


          <div class="tile">

              <div class="row">
                <h4 class="span5">
                <span class="mrm">Database:
                <select value="Text" class="span3" name="databases">
                  {% for db in databases %}
                  {%if db == database%}
                  <option value="{{db}}" selected="selected">{{db}}</option>
                  {%else%}
                  <option value="{{db}}" >{{db}}</option>
                  {%endif%}
                  {%endfor%}
                </select>
                {%if delete%}
                <form action="/delete" method="POST" id="form" class="hidden-form">{% csrf_token %}
                  <input id="database" name="database" type="hidden"/>
                </form>
                <form action="/remove_table" method="POST" id="form2">{% csrf_token %}
                  <input value="{{database}}" name="database" type="hidden"/>
                  <input id="id" name="table-id" type="hidden"/>
                </form>
                {%else%}
                <form action="/update" method="POST" id="form">{% csrf_token %}
                  <input id="database" name="database" type="hidden"/>
                </form>
                <form action="/load_data" method="POST" id="form2">{% csrf_token %}
                  <input value="{{database}}" name="database" type="hidden"/>
                  <input id="id" name="table-id" type="hidden"/>
                </form>
                {%endif%}
              </h4>
              </div>
            <table class="list">
              <thead>
                <tr id="header">
                  <th>table name</th>
                  <th>Columns</th>
                  <th>Records</th>
                  {%if delete%}
                  <th></th>
                  {%endif%}
                </tr>
              </thead>
              <tbody>
                {%for table in tables%}
                <tr class="first column">
                  <td class="col_tablename">
                    {%if delete%}
                    {{table.name}}
                    {%else%}
                    <strong><a href="#{{table.name}}" class="table-id">{{table.name}}</a></strong>
                    {%endif%}
                  </td>
                  <td class="col_cols">
                    {{table.cols}}
                  </td>
                  <td  class="col_records">
                    {{table.recs}}
                  </td>
                  {%if delete%}
                  <td>
                    <a href="#" class="remove btn btn-large btn-danger action"><i class="fui-cross-16"></i></a>
                  </td>
                  {%endif%}
                </tr>
                {%endfor%}
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

    </div> <!-- /container -->

    <footer>
      <div class="container">
        <div class="row">
          <div class="span7">
            <h3 class="footer-title">SQFlight is distributed under GPL v3 License</h3>
          </div> <!-- /span8 -->

          <div class="span5">
            <div class="footer-banner">
              <h3 class="footer-title"><img class="logo2" src="{{STATIC_URL}}images/logo2.png"> SQLite Administrator</h3>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <!-- Load JS here for greater good =============================-->
    <script src="{{STATIC_URL}}js/vendor/jquery-1.8.2.min.js"></script>
    <script src="{{STATIC_URL}}js/vendor/jquery-ui-1.10.0.custom.min.js"></script>
    <script src="{{STATIC_URL}}js/vendor/jquery.dropkick-1.0.0.js"></script>
    <script src="{{STATIC_URL}}js/vendor/custom_checkbox_and_radio.js"></script>
    <script src="{{STATIC_URL}}js/vendor/custom_radio.js"></script>
    <script src="{{STATIC_URL}}js/vendor/bootstrap-tooltip.js"></script>
    <script src="{{STATIC_URL}}js/vendor/jquery.placeholder.js"></script>
    <script src="{{STATIC_URL}}js/vendor/jquery.dataTables.min.js"></script>
    <script src="{{STATIC_URL}}js/controller/list.js"></script>
    <script src="{{STATIC_URL}}js/application.js"></script>
    <!--[if lt IE 8]>
      <script src="js/icon-font-ie7.js"></script>
      <script src="js/icon-font-ie7-24.js"></script>
    <![endif]-->
  </body>
</html>
